<template>
  <div>
    <el-card>
      <div class="dingbu">
        <p>
          分类名称:<el-input v-model="queryInfo.input" placeholder="请输入内容" clearable @input="search" @clear="clear" />
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add">新建</el-button>
        </p>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          width="50"
        />
        <el-table-column
          label="分类名称"
          prop="cateName"
        />
        <el-table-column
          label="描述"
          prop="content"
        />
        <el-table-column
          label="是否为默认频道"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.moren==1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status==1">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
        >
          <template slot-scope="scope">
            {{ scope.row.createtime|moment("YYYY-MM-DD HH:mm:ss") }}
          </template>

        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button v-if="scope.row.moren!=1" @click="upd(scope.row)"><a class="blue">编辑</a></el-button>
            <el-button v-else disabled @click="upd(scope.row)"><a class="qblue">编辑</a></el-button>
            <el-button v-if="scope.row.status==1" disabled><a class="qgreen">启用</a></el-button>
            <el-button v-else @click="chestu(scope.row.id,1)"><a class="green">启用</a></el-button>
            <el-button v-if="scope.row.status==0" disabled><a class="qred">禁用</a></el-button>
            <el-button v-else @click="chestu(scope.row.id,0)"><a class="red">禁用</a></el-button>
            <el-button @click="del(scope.row)"><a class="red">删除</a></el-button>
          <!-- <el-button v-else disabled @click="del(scope.row)"><a class="qred">删除</a></el-button>              -->
          <!-- <el-button  @click="del(scope.row)"><a class="red">删除</a></el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-sizes="[1, 5, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryInfo.t"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog title="新增分类" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="ruleForm" :model="form" :rules="rules">
        <el-form-item label="分类名称" prop="cateName">
          <el-input v-model="form.cateName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="分类描述" prop="content">
          <el-input v-model="form.content" autocomplete="off" />
        </el-form-item>
        <el-form-item label="是否启用" prop="status">
          <template>
            <el-radio v-model="form.status" label="1">启用</el-radio>
            <el-radio v-model="form.status" label="0">禁用</el-radio>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addsave">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改分类" :visible.sync="updlogFormVisible" width="30%">
      <el-form :model="form2">
        <el-form-item label="分类名称">
          <el-input v-model="form2.cateName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="分类描述">
          <el-input v-model="form2.content" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updlogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updsave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: [],

      dialogFormVisible: false,
      updlogFormVisible: false,
      form: {
        cateName: '',
        content: '',
        status: ''
      },
      form2: {
        id: '',
        cateName: '',
        content: ''
      },
      rules: {
        cateName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入分类简介', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择是否禁用', trigger: 'blur' }
        ]
      },
      queryInfo: {
        input: '',
        size: 5,
        page: 1,
        t: 10
      },

      pageisornot: false,
      role: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getcate()
    // this.role=sessionStorage.getItem("user")
  },
  mounted() {},
  methods: {
    //   获取信息
    async getcate() {
      this.pageisornot = false
      var res = await this.http.get('/knowledge/cate/', { params: this.queryInfo })
      console.log(res)

      if (res.data.code == 200) {
        this.tableData = res.data.data
        this.queryInfo.t = res.data.count
        //     this.role=res.data.user
      }
      // console.log(res)
    },
    async search() {
      this.getcate()
      //   if(!this.pageisornot){
      //       this.page=1
      //   }
      //   if(this.input!=''){
      //     var res=await this.http.get('/cate',{
      //       params:{search:this.input}
      //     })
      //     if(res.data.code == 200){
      //       this.tableData = res.data.data
      //     }
      //   }else{
      //     // this.getcate()
      //   }
      this.pageisornot = true
    },
    clear() {
      this.getcate()
    },
    add() {
      this.dialogFormVisible = true
    },
    async addsave() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          var res = await this.http.post('/knowledge/cate/', this.form)
          console.log(res, '添加')
          if (res.data.code == 200) {
            this.getcate()
            this.dialogFormVisible = false
            this.$message.success('添加成功')
          } else {
            this.dialogFormVisible = false
            this.$message.error('添加失败')
          }
        } else {
          this.$message.error('格式错误')
        }
      })
    },
    upd(row) {
      this.updlogFormVisible = true
      //   this.form2.id=row._id
      //   this.form2.cateName=row.cateName
      //   this.form2.content=row.content
      this.form2 = row
      // console.log(this.form2,'123');
    },
    // 修改分类
    async updsave() {
      var res = await this.http.put('/knowledge/cate/', this.form2)
      // alert(this.form2.id)
      //   var res=await this.http.put(`/cate/${this.form2.id}`,{
      //       cateName:this.form2.cateName,
      //       content:this.form2.content
      //   })
      if (res.data.code == 200) {
        // this.getcate()
        this.updlogFormVisible = false
        this.$message.success('修改成功')
      }
    },
    async chestu(id, s) {
      // var res=await this.http.put(`/cate/${id}`,{
      //   status:s
      // })
      var res = await this.http.put('/knowledge/cate/', { id: id, s: s })
      if (res.data.code == 200) {
        this.getcate()
        this.$message.success('修改状态成功')
      }
    },
    handleSizeChange(v) {
      this.queryInfo.size = v
      this.getcate()
      // if(this.pageisornot){
      //     this.search()
      // }else{
      //     // this.getcate()
      // }
    },
    handleCurrentChange(v) {
      this.queryInfo.page = v
      this.getcate()
      // if(this.pageisornot){
      //     // this.search()
      // }else{
      //     // this.getcate()
      // }
    },
    del(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        //   var res=await this.http.delete(`/cate/${row._id}`)
        var res = await this.http.delete(`/knowledge/dcate/${row.id}`)
        console.log(res, '删除')
        if (res.data.code == 200) {
          this.getcate()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
          this.$message({
            type: 'error',
            message: '没有权限!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style scoped>
    .el-input{
      width: 200px;
      margin-left: 7px;
    }
    .dingbu{
      padding-bottom: 15px;
      border-bottom: 2px solid ghostwhite;
    }
    .dingbu p .el-button{
      float: right;
      margin-right: 10px;
    }
    .el-table{
      margin-top: 15px;
    }
    .el-table .el-button{
      background: 0;
      padding-left: 0;
      padding-right: 0;
      display: inline-block;
      border:0;
    }
    .blue{
      color: #3175fb;
    }
    .green{
      color: green;
    }
    .qgreen{
      color: #c4e2d6;
    }
    .red{
      color: red;
    }
    .qred{
      color: #f6caca;
    }
    .el-dialog .el-input{
      width: 400px;
    }
    .el-dialog .el-radio{
      margin-left: 20px;
    }
    .el-pagination{
      margin-top: 20px;
      text-align: center;
    }
</style>
